<template>
	<view>
		<view style="position: absolute;z-index: 101;max-height: 70vh;min-height: 50vh;" @touchmove.stop.prevent="">
			<uni-popup ref="popup" type="bottom" :background-color="bgColor">
				<view class="depart-sure-cancel" style="background: var(--bg-center-color)">
					<view style="display: flex;flex-direction: row;align-items: center;">
						<view
							style="height: 28rpx;width: 10rpx;background-color: var(--grey-text);border-radius: 10rpx;">
						</view>
						<view style="font-size: 28rpx;font-weight: 600;color: var(--white-text);margin-left: 20rpx;">
							收款额：{{formatNumber(businessData.receiptsMoney)||0}}</view>
					</view>
					<view style="color: var(--grey-text);font-size: 28rpx;" @click="closePopup">关闭</view>
				</view>
				<view class="line-split"></view>
				<scroll-view scroll-y style="max-height: 70vh;min-height: 50vh;" :show-scrollbar="false">
					<view style="padding-bottom: 50rpx;">
						<!-- 消费收款 -->
						<view style="padding: 0 30rpx;" v-if="check_business.length>0">
							<view
								style="background-color: var(--bg-center-color);border-radius: 16rpx;padding-bottom: 30rpx;">
								<view class="performance-detail-content-detail">
									<view class="detail-title">
										<view style="display: flex;flex-direction: row;">
											<view class="detail-name font-28">
												消费收款：{{formatNumber(businessData.receiptsMoneyDetails.check.checkMoney)||0}}
											</view>
										</view>
									</view>
									<view class="line-split"></view>
									<view class="detail-body" style="padding: 0 10rpx;height: auto;margin-top: 20rpx;"
										v-for="(item,index) in check_business" :key="index">
										<view class="detail-item" :class="{'align-end':index1 == 1}"
											v-for="(detail,index1) in item" :key="index1">
											<view class="label">{{detail.payment_name}}：</view>
											<view class="value">{{formatNumber(detail.payment_money)||0}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 充值收款 -->
						<view style="padding: 0 30rpx;"  v-if="charge_business.length>0">
							<view
								style="background-color: var(--bg-center-color);border-radius: 16rpx;padding-bottom: 30rpx;">
								<view class="performance-detail-content-detail">
									<view class="detail-title">
										<view
											style="display: flex;flex-direction: row;justify-content: space-between;flex: 1;">
											<view class="detail-name font-28">
												充值收款：{{formatNumber(businessData.receiptsMoneyDetails.charge.chargeMoney)||0}}
											</view>
											<view class="detail-name font-28">
												赠送金额：{{formatNumber(businessData.receiptsMoneyDetails.charge.chargeSendMoney)||0}}
											</view>
										</view>
									</view>
									<view class="line-split"></view>
									<view class="detail-body" style="padding: 0 10rpx;height: auto;margin-top: 20rpx;"
										v-for="(item,index) in charge_business" :key="index">
										<view class="detail-item" :class="{'align-end':index1 == 1}"
											v-for="(detail,index1) in item" :key="index1">
											<view class="label">{{detail.payment_name}}：</view>
											<view class="value">{{formatNumber(detail.payment_money) || 0}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 小费收款 -->
						<view style="padding: 0 30rpx;" v-if="reward_business.length>0">
							<view
								style="background-color: var(--bg-center-color);border-radius: 16rpx;padding-bottom: 30rpx;">
								<view class="performance-detail-content-detail">
									<view class="detail-title">
										<view
											style="display: flex;flex-direction: row;justify-content: space-between;flex: 1;">
											<view class="detail-name font-28">
												小费收款：{{formatNumber(businessData.receiptsMoneyDetails.reward.rewardMoney)||0}}
											</view>
										</view>
									</view>
									<view class="line-split"></view>
									<view class="detail-body" style="padding: 0 10rpx;height: auto;margin-top: 20rpx;"
										v-for="(item,index) in reward_business" :key="index">
										<view class="detail-item" :class="{'align-end':index1 == 1}"
											v-for="(detail,index1) in item" :key="index1">
											<view class="label">{{detail.payment_name}}：</view>
											<view class="value">{{formatNumber(detail.payment_money) || 0}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 押金收款 -->
						<view style="padding: 0 30rpx;" v-if="deposit_business.length>0">
							<view
								style="background-color: var(--bg-center-color);border-radius: 16rpx;padding-bottom: 30rpx;">
								<view class="performance-detail-content-detail">
									<view class="detail-title">
										<view
											style="display: flex;flex-direction: row;justify-content: space-between;flex: 1;">
											<view class="detail-name font-28">
												押金收款：{{formatNumber(businessData.receiptsMoneyDetails.deposit.depositList)||0}}
											</view>
										</view>
									</view>
									<view class="line-split"></view>
									<view class="detail-body" style="padding: 0 10rpx;height: auto;margin-top: 20rpx;"
										v-for="(item,index) in deposit_business" :key="index">
										<view class="detail-item" :class="{'align-end':index1 == 1}"
											v-for="(detail,index1) in item" :key="index1">
											<view class="label">{{detail.payment_name}}：</view>
											<view class="value">{{formatNumber(detail.payment_money) || 0}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 销账收款 -->
						<view style="padding: 0 30rpx;" v-if="write_business.length>0">
							<view
								style="background-color: var(--bg-center-color);border-radius: 16rpx;padding-bottom: 30rpx;">
								<view class="performance-detail-content-detail">
									<view class="detail-title">
										<view
											style="display: flex;flex-direction: row;justify-content: space-between;flex: 1;">
											<view class="detail-name font-28">
												销账收款：{{formatNumber(businessData.receiptsMoneyDetails.write.writeMoney)||0}}
											</view>
										</view>
									</view>
									<view class="line-split"></view>
									<view class="detail-body" style="padding: 0 10rpx;height: auto;margin-top: 20rpx;"
										v-for="(item,index) in write_business" :key="index">
										<view class="detail-item" :class="{'align-end':index1 == 1}"
											v-for="(detail,index1) in item" :key="index1">
											<view class="label">{{detail.payment_name}}：</view>
											<view class="value">{{formatNumber(detail.payment_money) || 0}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tradeReceiptsPopup",
		data() {
			return {
				bgColor: 'var(--bg-color)',
				businessData: {},
				check_business: [],
				charge_business: [],
				reward_business: [],
				deposit_business: [],
				write_business: [],
			}
		},
		mounted() {

		},
		methods: {
			opens(item) {
				this.check_business = this.groupByThree(item.receiptsMoneyDetails.check.checkList)
				this.charge_business = this.groupByThree(item.receiptsMoneyDetails.charge.chargeList)
				this.reward_business = this.groupByThree(item.receiptsMoneyDetails.reward.rewardList)
				this.deposit_business = this.groupByThree(item.receiptsMoneyDetails.deposit.depositList)
				this.write_business = this.groupByThree(item.receiptsMoneyDetails.write.writeList)
				this.businessData = item
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			},
			groupByThree(array) {
				const result = [];
				for (let i = 0; i < array.length; i += 2) {
					result.push(array.slice(i, i + 2));
				}
				return result;
			},

			/**
			 * 格式化处理
			 * @param money
			 * @returns {string|*}
			 */
			formatNumber(money) {
				// 判断是否为整数（即小数部分是否为 0）
				if (money % 1 === 0) {
					return Number(money).toString()
				} else {
					return Number(money).toFixed(2)
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.depart-sure-cancel {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 90rpx;
		line-height: 90rpx;
	}

	.performance-detail-content-detail {
		border-radius: 10rpx;
		padding: 0 10rpx;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		color: var(--white-text);
		margin-top: 30rpx;
	}

	.detail-name {
		font-size: 28rpx;
		font-weight: 600;
		color: var(--white-text)
	}

	.detail-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 68rpx;
		align-items: center;
		line-height: 68rpx;
	}

	.detail-body {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 70rpx;
	}

	.label {
		font-size: 24rpx;
		color: var(--grey-text);
	}

	.value {
		font-size: 24rpx;
		color: var(--white-text);
		font-weight: 600;
	}

	.detail-item {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}

	.align-end {
		justify-content: flex-end;
	}
</style>